<template>
  <div id="map">
    <div class="echartMap" ref="chartsDOM" id="echartMap"></div>
    <!-- <div id="container"></div> -->
  </div>
</template>



<script>
// import echartMap from `@/api/newBigData/json/${city_name}.json`;
// import colorBg from "../../assets/newBigdata/img-bg.png";
// import amapService from "@/api/newBigData/amapService.js";
//引入echarts
import * as echarts from "echarts";
// import { log } from "ezuikit-js";
// import "echarts-gl";
import axios from "axios";

export default {
  props: {
    day_address_num_list: { type: Array },
    city_name: { type: String }, //返回城市
  },
  data() {
    return {
      // cityName: "", //当前城市
      adcode: "", //当前城市编码
      echartMaps: [], //json数据
      provinceName: "",
      quantity: 114,
      background: 'require("../../assets/newBigdata/img-qz.png")',
      timer: null
      // echartMap: require(`@/api/newBigData/json/${this.city_name}.json`),
    };
  },
  methods: {
    getAdcode(cityName) {
      const key = "8b17aacc98cc420ddf9021583076d977"; // 替换成你申请的高德地图Key
      const url = `https://restapi.amap.com/v3/geocode/geo?address=${cityName}&key=${key}`;
      axios
        .get(url)
        .then((response) => {
          this.adcode = response.data.geocodes[0].adcode;
          // console.log("11", this.adcode);
          // ${this.adcode}
          axios
            .get(
              `/map/areas_v3/bound/450700_full.json`
            )
            .then((response) => {
              console.log("地址", response.data, this.adcode);
              this.echartMaps = response.data;
            })
            .catch((error) => {
              console.error(error);
            });
        })
        .catch((error) => {
          console.error(error);
        });
    },

    fixingPositon() {
      // this.cityName = this.city_name;
      const e = event || window.event,
        top = e.clientY,
        left = e.clientX,
        boxDom = document.querySelector(".echartMap");

      this.$nextTick(function () {
        const offsetX = boxDom.clientWidth;
        const offsetY = boxDom.clientHeight;
        boxDom.style.cssText = `top: ${top - offsetY - 25}px; left: ${
          left + offsetX / 3
        }px`;
      });
    },

    ectras() {
      // const echartMaps = require(`@/api/newBigData/json/${this.city_name}.json`);
      // console.log(echartMaps, "echartMaps");

      const echartMaps = this.echartMaps;

      // 初始化统计图对象
      var myChart = echarts.init(this.$refs["chartsDOM"]);
      // 显示 loading 动画
      myChart.showLoading();
      // 再得到数据的基础上，进行地图绘制
      // 得到结果后，关闭动画
      myChart.hideLoading();
      // 注册地图(数据放在axios返回对象的data中哦)
      // console.log(this.echartMap, this.city_name, "this.echartMap");
      echarts.registerMap("JX", echartMaps);
      var option = {
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: "100%", //大小
        aspectScale: 1, //宽高比
        geo: {
          show: true,
          map: "JX",
          aspectScale: 0.8, // 横向拉伸
          label: {
            show: true,
            normal: {
              show: true, // 默认地图文字字号和字体颜色
              fontSize: 10,
              color: "#ffffff",
            },
            emphasis: {
              show: true,
              fontSize: 10, // 选中地图文字字号和字体颜色
              color: "#CFCFCF",
            },
          },
          roam: false, //是否开启鼠标缩放和平移漫游。默认不开启
          itemStyle: {
            normal: {
              // areaColor: "#011576", //地图本身的颜色
              borderWidth: 2, //设置外层边框
              borderColor: "#26EDFF",

              // 地图偏移度
              shadowColor: "rgb(17, 167, 249)",
              shadowOffsetX: 3,
              shadowOffsetY: 10,
              // borderColor: "#a18a3a",
              // borderWidth: 1,
            },
            emphasis: {
              show: false,
              // areaColor: null,
              // areaColor: '#01215c'
            },
          },
        },
        series: [
          {
            type: "map", //
            coordinateSystem: "geo",
            aspectScale: 0.8, // 横向拉伸
            // roam: true, //地图缩放，开启缩放或者平移

            map: "JX", // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            label: {
              show: true,
            },
            // data: {  //配置数据经纬度
            // name: "北京", // 数据项名称，在这里指地区名称
            // value: [
            //   // 数据项值
            //   116.46, // 地理坐标，经度
            //   39.92, // 地理坐标，纬度
            //   340, // 北京地区的数值
            // ],
            // },
            itemStyle: {
              normal: {
                // areaColor: "#011576", //地图本身的颜色
                // areaColor: {
                //   color: {
                //     type: "radial", // 径向渐变，多用于圆圈状图，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
                //     x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
                //     y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
                //     r: 0.9, // 0.5渐变影响范围只有一半，影响圆心到周围的一半
                //     colorStops: [
                //       {
                //         offset: 0,
                //         color: "rgba(147, 235, 248, 0)",
                //       },
                //       {
                //         offset: 1,
                //         color: "rgba(147, 235, 248, 115)",
                //       },
                //     ],
                //     global: false,
                //   },
                // },

                areaColor: new echarts.graphic.RadialGradient(0.5, 0.5, 0.9, [
                  {
                    offset: 0,
                    color: "rgba(1, 21, 118, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(8, 115, 194, 1)",
                  },
                ]),

                borderColor: "#00feda", //省份边框颜色
                borderWidth: 0.5, // 省份边框宽度
                // opacity: 1, //图形透明度
                show: false,
              },

              emphasis: {
                areaColor: "#1CC5FF", // 高亮时候地图显示的颜色
                borderWidth: 1, // 高亮时的边框宽度
              },
            },
            label: {
              show: false, //不显示名字
            },
          },
        ],

        // domImg: require("@/assets/newBigdata/img-bg.png"), //背景图
        // emphasis: {
        //   focus: "self",
        //   label: {
        //     show: true,
        //   },
        //   itemStyle: {
        //     opacity: 1,
        //     borderWidth: "2",
        //     borderColor: "#00feda",
        //   },
        // },

        tooltip: {
          show: true, //是否显示提示框组件
          alwaysShowContent: false, //是否永远显示提示框内容
          hideDelay: 100, //浮层隐藏的延迟
          triggerOn: "click", //提示框触发的条件,鼠标点击时触发
          trigger: "item", //数据项图形触发
          enterable: true, //鼠标是否可进入提示框浮层中
          // 提示框背景色
          backgroundColor: "rgba(0,0,0,0)",
          //弹出框的位置
          // position: ["50%", "20%"],
          // position: [50, 10],
          position: function (point, params, dom, rect, size) {
            // return [pos[0] - 10, pos[1] - pos[1] / 2 - 100];
            // console.log("111111", point, params, dom, rect, size);

            return [point[0] - 20, point[1]];
          },

          // textStyle: {
          //   color: "#DADADA",
          //   fontSize: "12",
          //   width: 200,
          //   height: 303,
          //   overflow: "break",
          //   backgroundColor: "#000",
          // },

          // 弹出设置
          formatter: (params, lallback) => {
            console.log(params, "params");
            params.encode.value = 0;
            this.day_address_num_list.map((item) => {
              // console.log("paramsqw3e213", params.name, item.name);
              if (params.name == item.name) {
                params.encode.value = item.num;
              }
            });

            const str = `<div style = "background:url(${require("../../assets/newBigdata/img-qz.png")}) no-repeat;font-size: 16px;width: 9rem;height: 4.5rem; ">
          <div style="height:1.6rem; margin-left: 2rem; padding-top:0.7rem;">${
            params.name
          } </div>
          <div style="margin-left: 1.875rem; margin-top: 16px;">订单数 : ${
            params.encode.value
          }  </div>
          </div>`;
            // width: 12.5rem;height: 16.75rem
            return str;
          },
        },
      };

      myChart.setOption(option);
      myChart.on("click", (params) => {
        var mousePos = [params.event.offsetX, params.event.offsetY]; // 这里的mousePos就是鼠标点击位置的相对坐标
        console.log("mousePos1", mousePos);
      });

      myChart.off("click");
      this.dataIndex = 0
      this.timer = setInterval(() => {
        if(this.dataIndex < this.day_address_num_list.length) {
          this.dataIndex ++
        }else {
          this.dataIndex = 0
        }
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,  // 系列索引，从0开始
          dataIndex: this.dataIndex     // 数据点索引，从0开始
        });
      }, 5000)
      
      //   myChart.on("click", function (params) {
      //     params.event.event
      //       ? params.event.event.stopPropagation()
      //       : (event.cancelBubble = true);
      //     // if(params.name === '武汉') _this.projectInfo = [..._this.WUHAN]
      //     // else if(params.name === '上海') _this.projectInfo = [..._this.SHANGHAI]
      //     if (["scatter", "effectScatter"].includes(params.componentSubType)) {
      //       //点击某个点的操作
      //       _this.showBox = true;
      //       if (_this.showBox) _this.fixingPositon();
      //     } else {
      //       _this.showBox = false;
      //     }
      //   });
    },
  },

  mounted() {
    setTimeout(() => {
      this.ectras();
    }, 800);
    this.getAdcode(this.city_name);
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  }
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 100%;
}
.echartMap {
  width: 100%;
  height: 100%;
}
.dfgsd {
  color: #dadada;
}
.str {
  background: url(require("../../assets/newBigdata/img-qz.png")) no-repeat;
  width: 12.5rem;
  height: 16.75rem;
  font-size: 16px;
}
</style>